<template>
    <div>
        <head-top></head-top>
        <el-row style="margin-top: 20px;">
            <el-col :span="14" :offset="4">
                <header class="form_header">
                    <h3>注册的移动云端信息</h3>
                </header>
                <el-form  label-width="auto" label-position="left" class="form">
                    <el-row class="category_select">
                        <el-col :span="12">
                            <el-form-item label="登陆账号:">
                            {{keyword.appusername}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 登陆密码:">
                            {{keyword.apppassword}}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row class="add_category_row" :class="showAddCategory? 'showEdit': ''">
                        <el-col :span="12">
                            <el-form-item label="关键词:">
                                {{keyword.keywords}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="登陆地址:">
                                {{keyword.loginurl}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户端下载地址(IOS):">
                                {{keyword.iosdownloadurl}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="二维码下载地址(IOS):">
                                {{keyword.codeiosurl}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户端下载地址(Android):">
                                {{keyword.androiddownloadurl}}
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="二维码下载地址(Android):">
                                {{keyword.codeandroidurl}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开始日期:">
                            {{keyword.regdatetime|moment('YYYY-MM-DD')}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束日期:">
                                {{keyword.regpassdatetime|moment('YYYY-MM-DD')}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="关键词有效年限:">
                                {{keyword.serviceyears}}年
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="add_category_button" @click="addCategoryFun">
                        <i class="el-icon-caret-top edit_icon" v-if="showAddCategory"></i>
                        <i class="el-icon-caret-bottom edit_icon" v-else slot="icon"></i>
                        <span>查看详细信息</span>
                    </div>
                </el-form>
                <header class="form_header">
                    <h3>基本信息</h3>
                </header>
                <el-form  label-width="110px" class="form food_form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业名称:">
                                 {{custom.customname}} {{custom.siteurl}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态:">
                                {{custom.customstatus==1?'启用':'停用'}}{{custom.customtypename}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业类型:">
                                {{custom.customtypename}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 企业主页:">
                                {{custom.siteurl}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <header class="form_header">
                    <h3>门户信息</h3>
                </header>
                <el-form  label-width="110px" class="form food_form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="法人代表:">
                                {{custom.bossname}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="注册日期:">
                                {{custom.regdatetime|moment('YYYY-MM-DD')}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="证件类型:">
                                {{custom.cardtypename}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 证件号码:">
                                {{custom.cardnum}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="国家:">
                                {{custom.country}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 省/地区:">
                                {{province.province}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区:">
                                {{area.area}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 城市:">
                                {{city.city}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司电话:">
                                {{custom.companytel}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司传真:">
                                {{custom.companyfax}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司地址:">
                                {{custom.companyaddress}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label=" 备注:">
                                 {{custom.memo}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <header class="form_header">
                    <h3>联系人信息</h3>
                </header>
               <el-form label-width="110px" class="form food_form">
                    <el-row v-for="contact in contacts" :key="contact.id">
                        <el-col :span="8">
                            <el-form-item label="联系人姓名:">
                                <el-tooltip placement="top">
                                  <div slot="content">传真:{{contact.contactfax}}<br/>邮箱:{{contact.contactemail}}</div>
                                  <el-button type="infor">{{contact.contactname}}</el-button>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系人号码:">
                                {{contact.contacttel}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职务:">
                                {{contact.contactrole}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <header class="form_header">
                    <el-button type="primary"  @click="$router.push('/portalList')">返回</el-button>
                </header>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import {
        getCategory,
        addCategory,
        addFood,queryKeyword
    } from '@/api/getData'
    import {
        baseUrl,
        baseImgPath
    } from '@/config/env'
    export default {
        data() {
            return {
                baseUrl,
                baseImgPath,
                showAddCategory: false,
                keyword:'',
                custom:'',
                province:'',
                city:'',
                area:'',
                contacts:''
                }
        },
        components: {
            headTop,
        },
        watch:{
          $route(to,from){
              if(to.path=="/lookPortal"){
                this.getData();
            }
          }
        },
        created() {
            this.getData();
        },
        methods: {
            async getData() {
                this.showAddCategory=false;
                    if(this.$route.query.id){
                    const result = await queryKeyword(this.$route.query.id);
                    this.keyword=result.keyword;
                    this.custom=result.custom;
                     this.province=result.province;
                      this.city=result.city;
                       this.area=result.area;
                        this.contacts=result.contacts;
                    }
                },
                addCategoryFun(){
                	this.showAddCategory = !this.showAddCategory;
                }
            },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .form {
        min-width: 400px;
        margin-bottom: 30px;

        &:hover {
            box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
            border-radius: 6px;
            transition: all 400ms;
        }
    }

    .food_form {
        border: 1px solid #eaeefb;
        padding: 10px 10px 0;
    }

    .form_header {
        text-align: center;
        margin-bottom: 10px;
    }

    .category_select {
        border: 1px solid #eaeefb;
        padding: 10px 10px 0px 10px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }

    .category_select2 {
        border: 1px solid #eaeefb;
        padding: 0px 10px 0px 10px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }

    .add_category_row {
        padding: 0px 0px 0px 10px;
        height: 0;
        overflow: hidden;
        transition: all 400ms;
        background: #f9fafc;
    }

    .showEdit {
        height: 300px;
    }

    .add_category {
        background: #f9fafc;
        padding: 10px 30px 0px 10px;
        border: 1px solid #eaeefb;
        border-top: none;
    }

    .add_category_button {
        text-align: center;
        line-height: 40px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border: 1px solid #eaeefb;
        border-top: none;
        transition: all 400ms;

        &:hover {
            cursor:pointer;
            background: #f9fafc;

            span,
            .edit_icon {
                color: #20a0ff;
            }
        }

        span {
            .sc(14px, #999);
            transition: all 400ms;
        }

        .edit_icon {
            color: #ccc;
            transition: all 400ms;
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .cell {
        text-align: center;
    }
</style>
